<template>
  <div class="homecom">
    <header>
        <aside class="a1">
            <img src="../assets/touxiang.jpeg" alt="">
            <p>{{username}}</p>
            <button class="b1" @click="tuichu()">【退出登录】</button>
        </aside>
   </header>
   <body>
        <aside class="a2">
            <ul>
                <li><router-link to="/add">添加人员</router-link></li>
                <li><router-link to='/list'>人员列表</router-link></li>
                <li><router-link to='/school'>学校列表</router-link></li>
                <li><router-link to='/productlist'>商品列表</router-link></li>
            </ul>
        </aside>
        <article>
            <router-view></router-view>
        </article>
   </body>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name : 'HomeCom',
    data(){
        // 访问会话存储中存储的登录者账号
        let  loginuser = sessionStorage.getItem('islogin')
        return{
             username : loginuser, //在页面渲染前，读取会话存储的数据并赋值
        }
    },
     computed:{
        ...mapState(['user']),
    },
    components(){
        localStorage.getItem() == this.username;
        console.log( localStorage.getItem(this.username));
        
    },
    methods:{
         ...mapMutations(['adduser']),
        tuichu(){
            localStorage.clear();
            sessionStorage.clear();
            this.$router.push('/login');
        }
    }
}
</script>

<style scoped>
    .homecom{
        width: 100%;
    }
    header{
        padding-left: 30px;
        padding-top: 30px;
        width: 100%;
        height: 15vh;
        background-color: aqua;
    }
    .homecom header img{
        width: 5rem;
        height: 10vh;
        border-radius: 100%;
    }
    .homecom header .b1{
        border: 0;
        color: rgb(47, 161, 255);
        background-color: aqua;
    }
    .homecom header .a1{
        display: flex;
        align-items: center;
    }
    body{
        width: 100%;
        background-color: cadetblue;
        display: flex;
        flex-direction: row;
        height:100%;
    }
    body .a2{
        display: flex;
        width: 20%;
        height: 100%;
        flex-direction: column;
    }
    body a{
        width: 100%;
    }
    body article{
        width: 80%;
        height:100%;
    }
    body ul{
        justify-items: center;
        text-align: center;
        }
    body li{
        width: 100%;
        line-height: 8vh;
        background-color: rgb(0, 140, 255);
        border-bottom:double 3px gold;
        }
</style>